<template>
  <div class="index">
    <!-- 顶部 -->
    <div class="top"><Admin></Admin></div>
    <!-- bottom -->
    <div class="bottom">
      <div class="left"><SideNav></SideNav></div>
      <div class="right">
        <div class="content">
          <el-scrollbar style="height: 100%;">
            <!-- 当前位置 -->
            <div class="current_position">
              <p class="breadcrumb">当前位置 :</p>
              <el-breadcrumb separator="/">
                <el-breadcrumb-item class="up">订单管理</el-breadcrumb-item>
                <el-breadcrumb-item class="up"><a @click="goTo('/WaitingList')">待接订单</a></el-breadcrumb-item>
                <el-breadcrumb-item>订单详情</el-breadcrumb-item>
              </el-breadcrumb>
            </div>
            <!-- 用户信息 -->
            <div class="userinformation">
              <div class="title">订单详情</div>
              <!-- 商品信息 -->
              <div class="proMsg">
                <div class="title">
                  <p>订单ID</p>
                  <p>项目名称</p>
                  <p>消费金额</p>
                </div>
                <div class="box">
                  <div class="msg">
                    <p>{{orders.tradeId}}</p>
                  </div>
                  <div class="msg">
                    <p>{{orders.mouldName}}</p>
                    <p>路费</p>
                  </div>
                  <div class="msg">
                    <p>¥{{orders.quote}}</p>
                    <p>¥{{orders.fare}}</p>
                  </div>
                </div>
                <div class="money">
                  实付款:<i>{{orders.disbursements}}</i><i>元</i>
                </div>
              </div>
              <!-- 订单信息 -->
              <div class="orderMsg">
                <div class="msg">
                  <p class="name">会员信息</p>
                  <p>会员ID:{{user.customerId}}</p>
                  <p>会员名:{{user.customerName}}</p>
                  <p>手机号:{{user.customerPhoneNum}}</p>
                  <p>地址:{{user.customerAddress}}</p>
                </div>
                <div class="msg">
                  <p class="name">技工信息</p>
                  <p>技工ID:{{agent.mechanicId}}</p>
                  <p>姓名:{{agent.mechanicName}}</p>
                  <p>技工电话:{{agent.mechanicPhoneNum}}</p>
                  <p>地址:{{agent.mechanicAddress}}</p>
                </div>
                <div class="msg">
                  <p class="name">订单信息</p>
                  <p>交易号1:{{orders.payNoOne}}</p>
                  <p>交易号2:{{orders.payNoTwo}}</p>
                  <p v-if="orders.status==1">订单状态:商户未接单</p>
                  <p v-if="orders.status==2">订单状态:已接单未开始</p>
                  <p v-if="orders.status==3">订单状态:进行中</p>
                  <p v-if="orders.status==4">订单状态:已完成</p>
                  <p v-if="orders.status==5">订单状态:已评价</p>
                  <p v-if="orders.status==6">订单状态:商户已取消</p>
                  <p v-if="orders.status==7">订单状态:客户取消</p>
                  <p v-if="orders.status==8">订单状态:已超时</p>
                  <p>订单编号:{{orders.tradeId}}</p>
                  <p>创建订单:{{orders.createTime}}</p>
                  <p>订单结算:{{orders.overTime}}</p>
                  <p>备注: <input type="text" v-model="orders.remark" @blur="getOrderRemark()"></p>
                </div>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  let moment = require("moment")
  import Admin from '@/components/Admin.vue'
  import SideNav from '@/components/SideNav.vue'
  export default {
    name: 'ProjectDetail',
    components:{
      Admin,
      SideNav
    },
    data () {
      return {
        id:'',//订单id
        user:{
          customerId:'',//商户id
          customerName:'',//商户名
          customerPhoneNum:'',//商户手机号
          customerAddress:'',//商户地址
        },//会员信息
        agent:{
          mechanicId:'',//技工id
          mechanicName:'',//技工名称
          mechanicPhoneNum:'',//技工电话
          mechanicAddress:'',//技工地址
        },//技工信息
        orders:{//订单信息
          tradeId:'',//订单号
          mouldName:'',//服务名称
          quote:'',//服务报价
          fare:'',//路费
          disbursements:'',//实付款
          payNoOne:'',//交易号1
          payNoTwo:'',//交易号2
          createTime:'',//创建时间
          status:'',//订单状态
          overTime:'',//订单结算时间
          remark:'',//订单备注
        },
      }
    },
    mounted() {
      // 取到路由带过来的参数
      this.id= JSON.parse(JSON.stringify(this.$route.query.data));

      console.log("订单信息1:"+this.id);
      this.getOrdersDetails();
    },
    // 时间格式过滤
    filters: {
      dateForma(dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
        return moment(dataStr).format(pattern)
      }
    },
    methods: {
      // 路由
      goTo(path) {
        this.$router.push(path);
      },
      // 获取订单详情
      getOrdersDetails(){
        this.$axios.post(this.baseURL1+'admin/releaseRequirements/info',{
          "id": this.id,
          "requestSource":"PC"
        }).then((res)=>{
          console.log(res,"订单详情");
          this.orders.tradeId = res.data.data.tradeId;//订单id
          this.orders.mouldName = res.data.data.mouldName;//服务名称
          this.orders.quote = res.data.data.quote;//服务报价
          this.orders.fare = res.data.data.fare;//路费
          this.orders.disbursements = res.data.data.disbursements;//实付款
          this.orders.payNoOne = res.data.data.payNoOne;//交易号1
          this.orders.payNoTwo = res.data.data.payNoTwo;//交易号2
          this.orders.createTime = res.data.data.createTime;//创建时间
          this.orders.status = res.data.data.status;//订单状态
          this.orders.overTime = res.data.data.overTime;//结算时间

          this.user.customerId = res.data.data.customerId;//商户id
          this.user.customerName = res.data.data.customerName;//商户名
          this.user.customerPhoneNum = res.data.data.customerPhoneNum;//商户手机号
          this.user.customerAddress = res.data.data.customerAddress;//商户地址
          this.agent.mechanicId = res.data.data.mechanicId;
          this.agent.mechanicName = res.data.data.mechanicName;
          this.agent.mechanicPhoneNum = res.data.data.mechanicPhoneNum;
          this.agent.mechanicAddress = res.data.data.mechanicAddress;
        }).catch((err)=>{
          console.log('request fail', err);
        })
      },
      // 保存订单备注
      getOrderRemark(){
        console.log(this.orders.remark,"订单备注");
      },
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  @import '@/assets/css/index.scss'; //这个分号一定要写，要不会报错
  @import '@/assets/css/user.scss'; //这个分号一定要写，要不会报错
  .userinformation{
    width: 100%;
    height: 100%;
    // border: #008A00 1px solid;
    box-sizing: border-box;
    background-color: #F0F0F0;
    .title{
      margin-bottom: 10px;
    }
    .proMsg{
      width: 100%;
      height: auto;
      min-height: 100px;
      background-color: #FFFFFF;
      margin-bottom: 10px;
      // border: 1px solid red;
      box-sizing: border-box;
      .title{
        width: 100%;
        height: 30px;
        background-color: #95c2f3;
        padding: 0 10px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        line-height: 30px;
        p{
          display: inline-block;
          font-weight: bold;
          width: 19%;
          height: 100%;
          text-align: left;
        }
        p:last-child{
          text-align: right;
        }
      }
      .box{
        width: 100%;
        height: auto;
        padding: 0 10px;
        margin-bottom: 10px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        .msg{
          display: inline-block;
          width: 19%;
          height: 150px;
          line-height: 30px;
          vertical-align:middle;
        }
        .msg:last-child{
          text-align: right;
        }
      }
      .money{
        width: calc(100% - 20px);
        height: 50px;
        border-top: 1px solid #999999;
        margin: auto 10px;
        padding: 0 30px;
        box-sizing: border-box;
        text-align: right;
        line-height: 50px;
        font-size: 16px;
        i{
          color: #ff5733;
          font-style: normal;
          font-size: 18px;
        }
        i:last-child{
          color: #333333;
          font-size: 14px;
        }
      }
    }
    .orderMsg{
      width: 100%;
      min-height: 305px;
      background-color: #FFFFFF;
      display: flex;
      .msg{
        flex: 1;
        padding: 30px 10px 0 50px;
        .name{
          font-weight: 600;
          font-size: 18px;
        }
        p{
          line-height: 25px;
        }
        input{
          outline: none;
        }
      }
    }
  }

</style>
